<template>
  <el-backtop :bottom="100" style="width: 54px;height: 54px;">
    <div
        style="
        padding-top: 18px;
        height: 75%;
        width: 100%;
        background-color: #00c792;
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
      "
    >
      <img src="../../assets/向上箭头.png" style="width: 30px;height: 25px;">
    </div>
  </el-backtop>
  <div class="detailBody">
    <el-breadcrumb :separator-icon="ArrowRight" class="detail_breadcrumb">
      <el-breadcrumb-item class="detail_breadcrumb_item1" :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        查医院
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="info">
      <div class="baike-category-filter-title">科室</div>
      <ul>
        <li v-for="(item, key) in department.department_list" :key="key">
          <el-button v-if="hospital.department_id==item.id" style="background-color:#00c792;color:white;" class="categoryButton" @click="healthDetail.current_disease=item.id">{{ item.name }}</el-button>
          <el-button v-else class="categoryButton" @click="hospital.department_id=item.id">{{ item.name }}</el-button>
        </li>
      </ul>
    </div>
    <div class="hospital_info">
      <ol class="DetailContent">
        <li id="olLi" v-for="(item, key) in hospital.hospital_list" :key="key">
          <img class="DetailImg" :src="item.cover" alt="../../assets/暂无图片.png">
          <a href="" class="DetailText1" @click.prevent="toHealthInfo(item.id)">
            {{ item.name }}
          </a>
          <img src="../../assets/右箭头.png" style="width: 14px;height: 14px;margin-left: 10px;float: left;margin-top: 12px" @click.prevent="toHealthInfo(item.id)"/>
          <p style="float: left;background-color: #fff4e5;color: #ffb54c;font-size: 12px;margin-left: 12px" @click.prevent="toHealthInfo(item.id)">{{item.get_level_display}}</p>
          <div class="DetailText2">
            <p>{{ item.address }}</p>
          </div>
          <br/>
          <el-divider content-position="center" style="width: 98%;margin-top: 30px;" />
        </li>
        <el-pagination background layout="prev, pager, next" :total="hospital.count" :page-size="3" :current-page="hospital.page" @current-change="changePage" style="display: flex;justify-content: center;"/>
      </ol>
    </div>
  </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import { ElMessage } from "element-plus";
import { ArrowRight } from '@element-plus/icons-vue'
import {useRouter, useRoute} from "vue-router";
import healthDetail from "../../api/healthDetail.js";
import life from "../../api/life.js";
import department from "../../api/Department.js";
import hospital from "../../api/hospital.js";
const router = useRouter()
const route = useRoute()


let health_name = ref("")


onMounted(()=>{
  department.get_department_list_all()
  hospital.get_hospital_list()
})

// 监听切换不同的生活手册-生活技巧
watch(
    ()=> hospital.department_id,
    ()=>{
      hospital.page = 1
      hospital.get_hospital_list()
    }
)

const changePage=(num)=>{
  console.log("页码改变" + num)
  hospital.page = num
  hospital.get_hospital_list()
}

const toHealthInfo=(id)=>{
  router.push(`/hospital_info?id=${id}`)
}
</script>

<style scoped>
.detailBody{
  width: 100%;
  height: 1000px;
  margin-top: 150px;
  background-color: #f2f3f5;
}

.detail_breadcrumb{
  padding-top: 1%;
  margin-left: 10%;
  font-size: 12px;
}

.detail_breadcrumb_item1 >>> .el-breadcrumb__inner{
  color: #00c792;
  cursor: pointer;
}


.detail_breadcrumb_item1 >>> .el-breadcrumb__inner.is-link:hover{
  text-decoration: underline; /* 下划线样式 */
  cursor: pointer;
}

.info{
  position: absolute;
  margin-top: 30px;
  margin-left: 150px;
  width: 80%;
  height: auto;
  background-color: white;
}
.hospital_info{
  position: absolute;
  margin-top: 360px;
  margin-left: 150px;
  width: 80%;
  height: auto;
  background-color: white;
}

.baike-category-filter-title{
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: #252a33;
  width: 50px;
  height: 200px;
  margin: 20px;
  float: left;
}

ul{
  list-style-type: none; /* 去掉默认的圆点 */
  padding: 0; /* 去掉默认的内边距 */
  text-align: justify; /* 两端对齐 */
  margin: 30px 0 0 150px;
}
li {
  display: inline-block; /* 让列表项横向排列 */
  margin-right: 4%; /* 为列表项之间添加一些间距 */
  width: calc(13% - 5px); /* 每个列表项的宽度，减去间距 */
  text-align: center; /* 使内容居中 */
  margin-top: 0;
}

li:after {
  content: ''; /* 添加伪元素 */
  display: inline-block;
  width: 100%; /* 伪元素的宽度 */
  height: 0;
}

.categoryButton{
  width: 100px;
  font-size: 13px;
  height: 25px;
  background-color: rgba(128,128,128,0.1);
}

.categoryButton:hover{
  width: 100px;
  height: 25px;
  background-color: #03c590;
  font-size: 13px;
  color: white;
}


.categoryButton:checked{
  width: 100px;
  height: 25px;
  background-color: #03c590;
  color: white;
}

.DetailContent{
  margin-left: 30px;
  margin-top: 30px;
  height: auto;
  width: 1185px;
  padding: 0;
}

#olLi{
  width: 1185px;
}

.DetailImg{
  width: 100px;
  height: 100px;
  min-width: 100px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, .05);
  overflow: hidden;
  box-sizing: border-box;
  float: left;
  margin-right: 10px;
  object-fit: cover;
}

.DetailText1{
  text-decoration-line: none;
  padding: 0;
  margin: 0 12px 0 10px;
  float: left;
  font-size: 28px;
  font-weight: 600;
  line-height: 32px;
  color: #252a33;
  display: -webkit-box;
  word-break: break-all;
  overflow: hidden;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  white-space: normal !important;
}

.DetailText1:hover{
  color: #03c590;
  text-decoration-line: underline;
  padding: 0;
  margin: 0 12px 0 10px;
  float: left;
  font-size: 28px;
  font-weight: 600;
  line-height: 32px;
}

.DetailText2{
  font-size: 14px;
  width: 1100px;
  color: #828993;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: -webkit-box;
  padding-left: 120px;
}


/* 修改前后箭头未点击时的背景颜色 */
:deep .el-pagination .btn-prev,
  /*:deep .el-pagination .btn-next {*/
  /*  background-color: #0e3a90 !important;*/
  /*}*/
  /* 修改未点击时的数字方块背景颜色 */
  /*:deep .el-pagination .el-pager li:not(.active):not(.disabled):hover {*/
  /*  background-color: #00c792 !important;*/
  /*}*/
  /* 未点击时的数字方块背景颜色 */
:deep .el-pagination .el-pager li:not(.active):not(.disabled) {
  background-color: white !important;
  color: black;
  border: 1px solid rgba(128, 128, 128, 0.2);
  border-radius: 4px;
}
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  /*修改默认的背景色 */
  background-color: #00c792 !important;
  color: white;
}

/*color: #ffb54c;*/


</style>